<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class</title>
    <style>
        .box {position:relative; width: 100px; height: 100px;background-color: #d9dde1;margin: 20px}
        .item{position: relative;width: 50px;height: 50px;background: yellow;top: 10px;left: 15px;
        margin: 20px}

        .red {background-color: red;}

        .b10 {border: 10px solid #000;}

        .m10 {margin: 10px;}

        .p10 {padding: 10px;}

        .hide {display: none;}
    </style>
</head>
<body>
<div class="box" id="demo">div
    <div class="item"></div>
</div>
<ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
</ul>
<script src="../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
        var element=$('#demo');
//      element.addClass('red b10 m10 p10')
        element.removeClass('red') //增加类和移除类
//      if(element.hasClass('hide')){
//            element.removeClass('hide');
//        }else{
//            element.addClass('hide');
//        }
//        element.toggleClass('hide')

        //增加样式
//        element.css('width',200)
//        element.css({
//            'background-color':'red',
//            height:200,
//            border:'10px solid #000',
//        })
//
//       $('li').each(function(index){
//           $(this).toggleClass('red',index % 3 ==0)
//        })
        console.log(element.width())
        console.log(element.height())
        console.log(element.innerWidth())
        console.log(element.innerHeight())

        console.log(element.offset())
        console.log(element.position())
        //获取或设置位置和滚动 scrollLeft(value); scrollTop(value)
        //offset(coordinates)

        //offset是相当于文档
        //position是相当于父元素

    })
</script>
</body>
</html>